<template>
  <el-dialog
    title="分配角色"
    :visible="showRolesVisible"
    @close="closeDialog"
    @open="open"
  >
    <el-checkbox-group v-model="checkList" v-loading="loading">
      <el-checkbox
        v-for="item in rolesList"
        :key="item.id"
        :label="item.id"
      >{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="assignRole">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetRolesList } from '@/api/setting'
import { reqGetUserDetailById } from '@/api/user'
import { reqAssignRole } from '@/api/employees'
export default {
  props: {
    showRolesVisible: {
      type: Boolean,
      default: false
    },
    assignId: { // 点击的员工的id
      type: String,
      required: true
    }
  },
  data() {
    return {
      rolesList: [], // 所有角色列表
      checkList: [], // 选中项的checkbox的label值会收集到这个数组中
      loading: false
    }
  },
  created() {
    // this.getAllRolesList()  // 组件创建期间就要获取所有角色列表
  },
  methods: {
    closeDialog() {
      // 通知父组件关闭对话框
      this.$emit('update:showRolesVisible', false)
      // this.checkList = []
    },
    // 获取所有角色列表
    async getAllRolesList() {
      const { data: { rows }} = await reqGetRolesList(1, 9999999)
      this.rolesList = rows
    },
    // 监听对话框的打开
    async open() {
      // this.loading = true
      // // 获取所有角色列表
      // await this.getAllRolesList()
      // // 获取点击员工的个人信息
      // await this.getUserDetail()
      // this.loading = false
      // 以上写法 多次阻塞
      // 如何在最短的时间内获取到多个并发请求的结果 Promise.all() 等待机制
      // 如果获取多个并发请求最快的响应数据  Promise.race() 竞赛机制
      this.loading = true
      Promise.all([this.getAllRolesList(), this.getUserDetail()]).then(values => {
        console.log(values) // values是一个数组,包含着两个promise对象的结果,但是因为这个两个函数都没有写返回值, [undefined, undefined]
        this.loading = false
      })

      // 静态成员 构造函数使用的属性方法all race allSettled  实例成员.then .catch .finally
      // allSettled 和  all 都会并发处理多个请求.
      // all  ['结果1', 结果2]
      // all只要有一个请求失败, 那就失败 allSettled不论请求是否成功都会执行 还会把错误的结果收集[{status: 'fufilled', value: xxx}]
    },
    // 获取点击员工的个人信息 个人信息中使用一个roleIds的数组, 将这个数组直接赋值给checkList
    async getUserDetail() {
      const { data: { roleIds }} = await reqGetUserDetailById(this.assignId)
      this.checkList = roleIds
    },
    // 为员工分配角色
    async assignRole() {
      await reqAssignRole(this.assignId, this.checkList)
      this.closeDialog()
    }
  }

}
</script>

<style>

</style>
